<template>
  <div>
    <el-dialog
      :visible.sync="formShow"
      @close="handleClickDeal('cancel')"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      title="按钮管理"
      append-to-body
      width="35%"
    >
      <el-form :model="form" label-width="90px" size="small">
        <el-form-item label="按钮名称">
          <el-input v-model="form.buttonName"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="表达式">
          <el-input v-model="form.expression" aria-placeholder="为空默认显示"></el-input>
        </el-form-item>
        <el-form-item label="样式">
          <el-input v-model="form.type"></el-input>
        </el-form-item>
        <el-form-item label="大小">
          <el-input v-model="form.size"></el-input>
        </el-form-item>
        <el-form-item label="事件">
          <el-input v-model="form.event"></el-input>
        </el-form-item>
        <el-form-item label="参数(JSON)">
          <el-input v-model="form.params"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleClickDeal('cancel')"> 取 消
        </el-button>
        <loading-button size="medium" type="primary" @click="handleClickDeal('submit', $event)" >保 存</loading-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import button from '@/api/wf/button'
  import msgUtil from '@/utils/msgUtil'
  import LoadingButton from '@/components/LoadingButton';

  export default {
    name: "buttonDetail",
    components: {
      LoadingButton,
    },
    props: {
      postDetail: {
        type: Object,
        default: {
          show: false
        }
      }
    },
    data() {
      return {
        formShow: false,
        detailType: 'add',
        form: {
          name: '',
          expression: '',
          detailType: '',
          size: 'mini',
          type: 'primary',
          event: '',
          param: ''
        },
      }
    },
    watch: {
      postDetail(value) {
        this.formShow = value.show
        this.form = {...value.param}
        this.detailType = value.type
      }
    },
    methods: {
      reset() {
        this.form = {
          buttonName: '',
          description: '',
          expression: '',
          taskDefKey: ''
        }
      },
      // 点击事件处理
      handleClickDeal(type, callback) {
        switch (type) {
          // 取消，关闭窗口
          case 'cancel':
            this.reset()
            this.formShow = false
            break
          // 保存
          case 'submit':
            this.submitDetail(callback)
            this.formShow = false
            break
          // 删除
          case 'delete':

            break
        }
      },
      submitDetail(callback) {
        if (this.detailType === 'add') {
          button.add(this.form).then(res => {
            msgUtil.success2('新增成功')
          }).finally(() => {
            if (callback) callback()
            this.$emit('updateButtonTable')
          })
        } else if (this.detailType === 'edit') {
          button.edit(this.form).then(res => {
            msgUtil.success2('修改成功')
          }).finally(() => {
            if (callback) callback()
            this.$emit('updateButtonTable')
          })
        }
      },
    }
  }
</script>

<style scoped>

</style>
